<#import "../../common/layout.ftl" as l>



<@l.content>

<script>
    var guanid=<#if param.guanid??>${param.guanid}<#else>""</#if>
   var  selectNodeId=<#if treeId??>${treeId}<#else>0</#if>
//    var crud = {
//        read: "/manage/ship/detail",
//        update: '/manage/ship/update',
//        del: "/manage/ship/delete"
//    };

//    var model = [
//        {name : 'shipid',type : 'hidden',text : '船舶编号',allowBlank : true,primaryKey : true},
//        {name : 'mmsi',type : 'number',text : 'MMSI',allowBlank : false,primaryKey : false},
//        {name : 'shipName',type : 'text',text : '船名',allowBlank : false,primaryKey : false},
//        {name : 'shipEnName',type : 'text',text : '船舶英文名',allowBlank : false,primaryKey : false},
//        {name : 'callSign',type : 'text',text : '船舶呼号',allowBlank : false,primaryKey : false},
//        {name : 'nation',type : 'text',text : '国籍',allowBlank : false,primaryKey : false},
//        {name : 'shipType',type : 'select',text : '船舶种类',allowBlank : false,primaryKey : false,options : {
//            url : "/dict/findByType?type=ship_type",
//            displayField : "label",
//            valueField : "label"
//        }},
//        {name : 'tonnage',type : 'number',text : '吨位',allowBlank : false,primaryKey : false},
//        {name : 'power',type : 'number',text : '主机功率',value:0,allowBlank : false,primaryKey : false},
//        {name : 'shipLength',type : 'number',text : '船舶长度',allowBlank : false,primaryKey : false},
//        {name : 'draftAfter',type : 'number',text : '后吃水',allowBlank : false,primaryKey : false},
//        {name : 'draftMax',type : 'number',text : '最大吃水',allowBlank : false,primaryKey : false},
//        {name : 'draftForward',type : 'number',text : '前吃水',allowBlank : false,primaryKey : false}
//    ];

    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        data: {
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function(treeId, treeNode) {
                zTreeObj = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    return false;
                } else {
                    console.log(treeNode.id);
                    $("#treeId").val(treeNode.id);
                    $("#pagination-form").submit();
                    return true;
                }
            }
        }
    };

    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
    ];

    $.ajax({
        type: "POST",
        async:false,
        url: "/ship/guanzhu/ajax/groupList",
        data: {},
        dataType: "json",
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                var node=new Object();
                node.id= data[i].id;
                node.pId=data[i].pid;
                node.name=data[i].name;
                node.open=false;
                zNodes.push(node);
            }
        }
    });



    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        zTreeObj.selectNode(zTreeObj.getNodeByParam("id",selectNodeId));

    });
</script>
<div style="float: left;width: 12%;height: 88%;border: 1px solid silver">
        <ul id="treeDemo" class="ztree"></ul>
</div>

<div style="float: right;width: 87%;border: 1px solid silver">
    <form  id="pagination-form" method="post" action="/ship/guanzhu/list" class="form-inline">
        <input type="hidden" name="treeId">
        <input type="hidden" name="page" value="${pageInfo.pageNum}">
        <input type="hidden" name="limit" value="${pageInfo.pageSize}">
        <input type="hidden" name="totalPage" value="${pageInfo.pages}">
        <div class="ibox">
            <div class="ibox-title">
                <div class="ibox-tools">
                    <a href="#" id="add">
                        <i class="fa fa-plus"></i>
                        添加关注
                    </a>
                    <a id="manageGroup" href="#">
                        <i class="fa fa-edit"></i>
                        管理分组
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="form-group">
                    <label class="sr-only" for="guanid">组别</label>
                    <select id="guanid" name="guanid" class="form-control" >
                        <option value="">--请选择组别--</option>
                        <#list guanZhuList as gz>
                            <option value="<#if gz.id??>${gz.id}<#else></#if>"><#if gz.name??>${gz.name}<#else></#if></option>
                        </#list>
                    </select>
                </div>
                <div class="form-group">
                    <div class="input-group search-content">
                        <label class="sr-only" for="keyword">关键字</label>
                        <input id="keyword" type="text" name="keyword" value="<#if keyword??>${keyword}<#else></#if>" class="form-control" placeholder="请输入船名或者MMSI">
                        <span class="input-group-btn">
                        <input type="submit" class="btn btn-primary" value="搜索">
                        </span>
                    </div>
                </div>
                <div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover dataTables-example" >
                            <thead>
                            <tr>
                            <#--<th>&nbsp;</th>-->
                                <th>船名</th>
                                <th>组别</th>
                                <th>MMSI</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody>
                                <#list pageInfo.list as report>
                                <tr>
                                <#--<td><input type="checkbox" class="i-checks" value="<#if report.sfid??>${report.sfid}<#else></#if>"></td>-->
                                    <td><#if report.shipname??>${report.shipname}<#else>暂无船名</#if></td>
                                    <td><#if report.guanZhu.name??>${report.guanZhu.name}<#else></#if></td>
                                    <td><#if report.mmsi??>${report.mmsi}<#else></#if></td>
                                    <td><a onclick="cancelFocus('${report.sfid}')"  href="#">取消关注</a>&nbsp;|&nbsp;<a onclick="changeGroup('<#if report.shipname??>${report.shipname}<#else>暂无船名</#if>','${report.mmsi}','${report.guanZhu.id}','${report.sfid}')"  href="#">修改分组</a></td>

                                </tr>
                                </#list>
                            </tbody>


                        </table>
                    </div>
                    <div class="pagination-content">
                        <div id="pagination" class="pagination">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>



</@l.content>
<link href="/ztree/css/zTreeStyle.css" rel="stylesheet"/>
<script src="/ztree/js/jquery.ztree.core.js"/>
<script src="/pagination/js/pagination.js"></script>
<script>
    $(document).ready(function () {
        $("#guanid").val(guanid);


        $("#manageGroup").click(function () {
            layer.open({
                type: 2,
                title: '管理分组',
                shadeClose: false,
                shade: 0.5,
                maxmin: true,
                area: ['400px','500px'],
                content:'/ship/guanzhu/manageGroup', //iframe的url

                end:function () {
                    location.reload();
                }
            });
        })

        $("#add").click(function () {
            layer.open({
                type: 2,
                title: '添加关注',
                shadeClose: false,
                shade: 0.5,
                maxmin: true,
                area: ['400px','500px'],
                content:'/ship/guanzhu/add', //iframe的url

                end:function () {
                    location.reload();
                }
            });
        })
    })

    function getGZ(){
        var str = "<option value=''>--请选择分组--</option>";
        $.ajax({
            type: "POST",
            async:false,
            url: "/ship/guanzhu/ajax/groupList",
            data: {},
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    str = str + "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                }
            }
        });
        return str;
    }

    function changeGroup(shipname,mmsi,guanId,sfid) {
        var gz=getGZ();
        var content="<div style='margin:10px 0 0 10px'><span style='font-size: 14px'>船名:&nbsp;"+shipname+"</span></div>" +
                "<div style='margin:10px 0 0 10px'><span style='font-size: 14px'>MMSI:&nbsp;"+mmsi+"</span></div>" +
                "<div  style='margin: 10px 0 0 10px'><label for='guanid' style='font-size: 14px'>分组:</label>&nbsp;<select id='guanId'>"+gz+"</select></div>";
        var l=layer.open({
            type: 1,
            title: '修改分组',
            shadeClose: false,
            shade: 0.5,
            area: ['250px','200px'],
            content:content, //iframe的url
            btn:['修改','取消'],
            success:function () {
                $("#guanId").val(guanId);
            },
            yes:function () {

                var id=$("#guanId").val();
                if(id=='')
                {
                    layer.msg("请选择组别！");
                }else {
                    $.ajax({
                        type: "POST",
                        url: "/manage/ship/user/changeGroup",
                        data: {sfid:sfid,mmsi:mmsi ,guanid:id},
                        dataType: "json",
                        success: function (data) {
                            if(data.result == true){
                                layer.close(l);
                                layer.msg("修改成功！");
                               setTimeout(function () {
                                   location.reload();
                               },500) ;
                            }else{
                                layer.msg("该分组下已存在该船舶！");
                            }
                        }
                    });
                }


            },
            btn2:function () {

            },
            end:function () {

            }
        })
    }



    function cancelFocus(sfid) {
        layer.confirm('确认取消关注该船舶？', {
            btn: ['确认','取消'] //按钮
        }, function(){
            $.ajax({
                type:'POST',
                url:'/ship/guanzhu/dropGuanZhu',
                data:{sfid:sfid},
                success:function (data) {
                    if(data){
                        layer.msg("取关成功");
                        setTimeout(function () {
                            location.reload();
                        },500);
                    }else{
                        layer.msg("取关异常");
                    }
                }
            })
        }, function(){
        });

    }
</script>

